<template>
  <div class="index">
    <div class="top">
      <div class="flex flex-col items-center p-[15px] h-full w-full">
        <div class="flex items-center w-full h-[60%] mb-[20px]">
          <div class="flex p-[5px] w-full">
            <div class="flex w-[60%] h-full ml-3" style="justify-content: flex-start">
              <img :src="science" alt="" class="w-[80px] h-[80px]"/>
              <div class="ml-10">
                <h1>quickCat</h1>
                <h3 class="mt-2">这是一个轻便简单的数据库可视化工具</h3>
              </div>
            </div>
            <div class="add w-[50%] h-[60px] flex items-center">
              <div class="flex items-center w-full" style="justify-content: flex-start">
                <img :src="add" alt="" class="w-[40px] h-[40px]"/>
                <span class="ml-3 z-8888">创建数据库配置</span>
              </div>
              <div :class="`i${i}`" v-for="i in 3"></div>
            </div>
          </div>
        </div>
        <div class="h-[calc(45%-10px)] w-full flex items-center justify-around">
          <div
              class="shimmer-wave w-[calc(100%/5)] h-full flex justify-center flex-col items-center b b-solid b-[rgb(18,150,219)] rounded-[5px] m-xy max-h-[60px]"
              v-for="(item,index) in info"
              :key="index">
            <div class="text-[20px] font-bold cursor-pointer hover:text-[rgb(18,150,219)]">{{ item.number }}</div>
            <div class="text-[12px] cursor-pointer hover:text-[14px] hover:text-[rgb(18,150,219)]">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="b-index">
        <table>
          <thead>
          <tr>
            <th>连接类型</th>
            <th>ping</th>
            <th>IP</th>
            <th>端口</th>
            <th>备注</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item, index) in dataBases" :key="index">
            <td>{{ item.type }}</td>
            <td>
              <div class="flex w-50px">
                {{ item.ping }}
              </div>
              <div class="flex  w-20px">
                <span>ms</span>
              </div>
            </td>
            <td>{{ item.status }}</td>
            <td style=" white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{ item.host || '-' }}</td>
            <td>{{ item.port || '-' }}</td>
            <td style=" white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{ item.remark || '-' }}</td>
            <td style=" white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{ item.create_time }}</td>
            <td>
              <div class="w-full h-full flex items-center">
          <span
              class="b b-solid b-white w-[50px] flex items-center hover:b-transparent hover:b-black hover:bg-[rgb(33,157,222)] hover:rounded-1 hover:c-[#fff]">
            查看
          </span>
                <span
                    class="b b-solid ml-2 b-white w-[50px] flex items-center hover:b-transparent hover:b-black hover:bg-[rgb(33,157,222)] hover:rounded-1 hover:c-[#fff]">
            编辑
          </span>
                <span
                    class="b b-solid ml-2 b-white w-[50px] flex items-center hover:b-transparent hover:b-black hover:bg-[rgb(33,157,222)] hover:rounded-1 hover:c-[#fff]">
            删除
          </span>
              </div>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import science from '@/assets/svg/science.svg'
import add from '@/assets/svg/add.svg'
import {onMounted, ref} from 'vue'

onMounted(async () => {
  setInterval(async () => {
    await init()
  }, 500)
})

const info = ref([
  {
    number: 0,
    name: 'MySQL',
  },
  {
    number: 0,
    name: 'MongoDB',
  },
  {
    number: 0,
    name: 'PostgreSQL',
  },
  {
    number: 0,
    name: 'Redis',
  },
])

const dataBases = ref<any []>([])

const getPing = async (id: number) => {
  const r = dataBases.value.find(i => i.id === id)
  try {
    return await window.electron.ping(r.host)
  } catch (error) {
    return error
  }
}

const init = async () => {
  const res = (await window.electron.systemDb('select * from dataBase', [])) as Array
  dataBases.value = res.map(item => ({
    ...item,
    ping: ''
  }))

  for (const item of dataBases.value) {
    item.ping = await getPing(item.id)
  }
}
</script>

<style scoped lang="scss">
@use "@/load";

$top-width: 25%;
$min-height: 150px;
.index {
  //border: 1px solid red;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;

  .top {
    width: 100%;
    height: $top-width;
    //border: 1px solid red;
    display: flex;
    flex-direction: column;
    min-height: $min-height;

    @keyframes sweep {
      0% {
        left: -2px;
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        left: 100%;
        opacity: 0;
      }
    }

    .shimmer-wave {
      position: relative;
      overflow: hidden;
      background: linear-gradient(to right, transparent, rgb(18, 150, 219));

      &::before {
        content: '';
        position: absolute;
        top: 0;
        transform: rotate(10deg);
        width: 2px;
        height: 100%;
        background: white;
        animation: sweep 5s infinite linear;
        pointer-events: none;
      }

      &:hover {
        cursor: pointer;
      }
    }

    .add {
      border: 1px solid rgb(18, 150, 219);
      border-radius: 5px;
      justify-content: center;
      cursor: pointer;
      position: relative;
      z-index: 999;
      background: white;
      overflow: hidden;

      img {
        margin-left: 35px;
        z-index: 2; /* 确保 img 在 .i 之上 */
      }

      .i1, .i2, .i3 {
        position: absolute;
        width: 105%;
        height: 125%;
        background: transparent;
        z-index: -1; /* 最底层 */
        //border: 1px solid red;
        top: -12.5%; /* 调整位置以适应 125% 的高度 */
        left: -2.5%; /* 调整位置以适应 105% 的宽度 */
      }

      &:hover {
        border: 1px solid rgb(18, 150, 219);
        border-radius: 5px;
        font-size: 18px;

        img {
          width: 45px;
          height: 445px;
        }

        .i1 {
          animation: i 1s infinite linear;
          background: red;
          transform: rotate(-120deg); /* 初始偏移 120 度 */
        }

        .i2 {
          animation: ii 2s infinite linear;
          background: green;
          transform: rotate(0deg); /* 初始偏移 240 度 */
        }

        .i3 {
          animation: i 3s infinite linear;
          background: blue;
          transform: rotate(-120deg);
        }

        @keyframes i {
          from {
            transform: rotate(0);
          }
          to {
            transform: rotate(360deg); /* 旋转 36 度 */
          }
        }

        @keyframes ii {
          from {
            transform: rotate(360deg); /* 旋转 36 度 */
          }
          to {
            transform: rotate(0);
          }
        }

      }

      &:after {
        top: 2px;
        position: absolute;
        width: 99%;
        height: 90%;
        content: '';
        border: 1px solid transparent;
        background: white;
        z-index: 1; /* 确保在 .i 之上 */
        color: black;
      }
    }

  }

  .bottom {
    width: 100%;
    height: calc(100% - #{$top-width});
    //border: 1px solid red;
    display: flex;
    flex-direction: column;

    .b-index {
      //border: 1px solid red;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      table {
        border: 1px solid rgb(33, 157, 222);
        width: 97%;
        height: 97%;
        display: flex;
        flex-direction: column;
        //padding: 20px;

        thead {
          border: 1px solid load.$theme;
          border-radius: 5px 5px 0 0;
          width: 100%;
          height: 40px;

          @extend .flex;

          tr {
            //border: 1px solid red;
            width: 100%;
            height: 100%;
            @extend .flex;

            th {
              @extend .flex;
              @extend .table-thead-th;
            }
          }
        }

        tbody {
          //border: 1px solid red;
          width: 100%;
          height: calc(100% - 40px);

          @extend .flex-col;
          justify-content: flex-start;
          overflow: scroll;

          tr {
            //border: 1px solid red;
            width: 100%;
            height: 40px;
            @extend .flex;
            z-index: 999;

            &:hover {
              --color: rgb(201, 231, 247);
              border-radius: 5px;
              justify-content: center;

              td {
                color: black;
                position: relative;

                @mixin hover-effect {
                  border-radius: 0;
                  border: 4px solid green;
                  #{–-color}: rgb(201, 231, 247);
                  font-size: 14px;
                }

                @for $i from 1 through 6 {
                  &:nth-child(#{$i}):hover:not(:nth-child(7)) {
                    @include hover-effect;
                  }
                }
              }
            }

            td {
              padding: 10px;
              @extend .table-thead-th;
              border: 1px solid white;
              border-radius: 5px;
              cursor: pointer;
              font-size: 16px;
            }

            td:first-child {
              border-radius: 0;
            }

            td:last-child {
              border-radius: 0;
              min-width: 150px;
            }
          }
        }
      }
    }
  }
}
</style>


